<template>
  <div id="main">
    <div id="" class="card">
      <!--查询条件-->
      <el-form :inline="true" :model="queryVo" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
        <el-form-item label="申请人:">
          <el-input v-model="queryVo.register" placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="供应商公司名称:">
          <el-input clearable v-model="queryVo.supplierName" placeholder="请输入供应商公司名称"></el-input>
        </el-form-item>
        <el-form-item label="订单进度:">
          <el-select clearable v-model="queryVo.conveyTag">
            <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-tiem>
          <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
        </el-form-tiem>
      </el-form>
      <!--数据表格-->
      <el-table
          :data="PurchaseOrders"
          style="width: 100%">
        <el-table-column
            prop="purchaseOrderNumber"
            label="订单编号"
            width="180">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="getOne(scope.row.id)">{{scope.row.purchaseOrderNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="supplierName"
            label="供应商公司名称(联系电话)"
            width="230">
          <template slot-scope="scope">
            <span>{{scope.row.supplierName+"("+scope.row.supplierNumber+")"}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="purchaseOrderAmount"
            label="总价格(元)"
            width="180">
        </el-table-column>
        <el-table-column
            prop="register"
            label="登记人"
            width="180">
        </el-table-column>
        <el-table-column
            prop="purchaseOrderTime"
            label="采购时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="checkTag"
            label="订单进度"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.conveyTag=='P001-1'">待发货</span>
            <span v-else-if="scope.row.conveyTag=='P001-2'" style="color: #f56c6c">待收货</span>
            <span v-else-if="scope.row.conveyTag=='P001-3'" style="color: #67C23A">已收货</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="0"
            label="操作"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.conveyTag=='P001-2'">
              <el-button type="text" @click="inStock(scope.row.id)">收货</el-button>
            </span>
            <span v-else-if="scope.row.checkTag!='P001-2'"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "PurQuery",
  data(){
    return{
      //表格数据
      PurchaseOrders:[],
      // 查询条件
      queryVo: {
        register: '',
        supplierName: '',
        conveyTag:'',
      },
      option:[
        {
          value:'P001-1',
          label:'待发货'
        },
        {
          value:'P001-2',
          label:'待收货'
        },
        {
          value:'P001-3',
          label:'已收货'
        }
      ],
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
    }
  },
  created() {
    this.query()
  },
  methods:{

    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async query(){
      console.log(this.queryVo)
      const {data: res} = await this.$http.post
      (`/purchaseOrder/queryAll/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.PurchaseOrders = res.list
      this.total = res.total
    },
    //采购单详情
    async getOne(id){
      sessionStorage.setItem("PurId",id)
      this.$router.push("/PurDetail")
    },
    //收货/入库
    async inStock(id){
      sessionStorage.setItem("inStockId",id)
      this.$router.push("/PurInStock")
    }
  }
}
</script>

<style scoped>
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>